<template>
  <div class="information">
    <!--搜素部分-->
    <el-card>
      <!--搜素部分-->
      <!--搜索部分的数据结构，searchform中存放5个数据项-->
      <el-form ref="form" :model="form" label-width="80px" :inline="true">
        <el-row>
          <el-col :span="6">
            <el-form-item label="商品类型">
              <el-input
                v-model="form.goodsType"
                style="width: 160px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="销售计价">
              <el-input v-model="form.goodsVal"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="searchbutton">
          <el-form-item>
            <el-button type="primary" @click="search()">查询</el-button>
            <el-button @click="reset()">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>
    <!--列表展示部分-->
    <el-card>
      <el-button type="primary" @click="addclient()">创建积分规则</el-button>
      <el-table :data="tableData"  border style="width: 100%">
        <el-table-column type="index" label="序号" fixed="left">
        </el-table-column>
        <el-table-column prop="proName" label="商品名称" width="180">
        </el-table-column>
        <el-table-column prop="goods_val" label="销售计价" width="180">
        </el-table-column>
        <el-table-column prop="priceType" label="价格类型" width="180">
        </el-table-column>
        <el-table-column prop="goods_type" label="商品类型" width="180">
        </el-table-column>
        <el-table-column prop="ratio" label="积分系数" width="180">
        </el-table-column>
        <el-table-column prop="enable" label="是否启用" width="180">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
               disabled
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="起始时间" width="180">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showedialog(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--分页部分-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[6, 12, 18, 24]"
        :page-size="queryinfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--弹出框部分-->
      <!--编辑的弹出框-->
      <el-dialog
        :title="dialogtitle"
        :visible.sync="dialogFormVisible"
        :modal="true"
      >
        <el-form :model="pushform">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="商品名称">
                <el-input v-model="pushform.proName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="销售计价">
                <el-input v-model="pushform.goods_val"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="价格类型">
                <el-input
                  v-model="pushform.priceType"
                  style="width: 160px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="商品类型">
                <el-input v-model="pushform.goods_type"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="积分系数">
                <el-input v-model="pushform.ratio"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="是否启用">
                <el-switch
              v-model="pushform.enable"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="起始时间">
                <el-date-picker
                  v-model="pushform.startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="pushform.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="12:00:00"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updataclient()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
//-------请求引入-------
import {
  getcreditsList,
  deletecredits,
  creditsidsearch,
  updatecredits,
  addcreditslist,
  searchcredits,
} from '../../http/api'
export default {
  data() {
    return {
      //搜索框的提交数据 内部存放后端提供的数据项
      form: {
        goods_val: '',
        goods_type: '',
        page: 1,
        limit: 10,
      },
      //列表渲染的数据
      tableData: [{}],
      //编辑框提交的数据
      pushform: {},
      //弹窗的数据
      //弹窗显示的bool数据
      dialogTableVisible: false,
      dialogFormVisible: false,
      //弹窗标题
      dialogtitle: '',
      //分页控制的数据
      queryinfo: {
        //当前页数
        page: 1,
        //每页显示数量
        limit: 10,
      },
      //数据总的数量
      total: 10,
      //验证规则部分
      //  rules: {
      //   proName: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
      //   ratio: [
      //     { required: true, message: '请输入积分系数', trigger: 'blur' },
      //     { max: 10, message: '长度在 10个字符内', trigger: 'blur' },
      //   ],
      //   goods_val: [{ required: true, message: '请输入销售计价', trigger: 'blur' }],
      //   priceType: [{ required: true, message: '请输入价格类型', trigger: 'blur' }],
      //   goods_type: [{ required: true, message: '请填写商品类型', trigger: 'blur' }],
      // },
    }
  },
  methods: {
    //-----搜索框部分函数-------
    //查询处理函数
    search() {
      console.log(this.form)
      searchcredits(this.form)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.tableData = res.data.value.data
          this.total = res.data.value.total
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    //查询框的重置参数
    reset() {
      for (let i in this.form) {
        this.form[i] = ''
      }
       this.form.page= 1;
       this.form.limit=10;
    },

    //-----列表操作项-------
    //获取列表数据，列表渲染
    getuserlist() {
      getcreditsList(this.queryinfo)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.tableData = res.data.value.data
          this.total = res.data.value.total
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    //点击按钮弹出修改的弹窗
    showedialog(index) {
      this.dialogtitle = '编辑客户信息'
      this.dialogFormVisible = true
      if (this.dialogtitle == '编辑客户信息') {
        creditsidsearch(index)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.pushform = res.data.value.data
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('列表渲染失败！')
          })
      }
    },
    //删除函数
    handleDelete(index) {
      console.log(index)
      deletecredits(index)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.getuserlist()
          return this.$message('删除成功！')
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    //-----整体操作按钮部分-------
    //新增客户数据接口
    addclient() {
      this.dialogtitle = '新增客户信息'
      this.dialogFormVisible = true
      this.pushform = {}
    },
    //新增用户界面提交按钮
    updataclient() {
      this.dialogFormVisible = false
      //根据当前不同的total，调用不同的接口
      if (this.dialogtitle == '新增客户信息') {
        console.log('选择框区分成功')
        this.Reserve()
        addcreditslist(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.getuserlist()

            console.log(this.pushform)

            return this.$message('用户信息添加成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('用户信息添加失败！')
          })
      } else if (this.dialogtitle == '编辑客户信息') {
        console.log('选择框区分成功')
        updatecredits(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            console.log(this.pushform)
            this.getuserlist()
            return this.$message('修改用户信息成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('修改用户信息失败！')
          })
      }
    },

    //-----分页操作部分-------
    //监听分页展示数量的改变
    handleSizeChange(newSize) {
      console.log(newSize)
      this.queryinfo.limit = newSize
      this.getuserlist()
    },
    //监听当前页码
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryinfo.page = newPage
      this.getuserlist()
    },

    //时间处理的模块
    reserve(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
      var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    Reserve() {
      this.pushform.endTime = this.reserve(this.pushform.endTime)
      this.pushform.startTime = this.reserve(this.pushform.startTime)
    },
  },
  created() {
    this.getuserlist()
  },
}
</script>
<style>
.grid-content {
  background-color: rosybrown;
}
.el-card {
  margin-top: 20px;
}
.searchbutton {
  margin-left: 80px;
}
</style>